<template>
  <transition name="fade">
    <div v-if="loading" class="global-loader flex flex-col gap-4 select-none">
      <img width="100" src="https://cd.sealmg.com/assets/img/loading.gif" alt="Loading animation" title="Please wait while loading" lazy="loading" />
      <div></div>
      <!-- height="166" -->
      <!-- <h1>Loading...</h1> -->
    </div>
  </transition>
</template>
<script>
  export default {
    name: 'loading',
    props: {},
    data() {
      return {
        loading: true
      }
    },
    head() {
      return {
        title: 'loading - SEALMG',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Loading page for SEALMG platform'
          }
        ]
      }
    },
    watch: {},
    computed: {},
    created() {
      let query = this.$route.query
      if (process.client) {
        const currentLang = this.$cookies.get('current_lang')
        this.$axios
          .get(`/api/user/callback`, {
            params: { ...query, platform: this.$route.params.platform }
          })
          .then(res => {
            if (res.code == 1) {
              this.$store.commit('user/setToken', res.data.userinfo.token || '')
              this.$store.commit('user/setUserInfo', res.data.userinfo || {})
              this.$router.replace({
                path: currentLang == 'en' ? `/` : `/${currentLang}/`
              })
            } else if (res.code == 2404) {
              this.$router.replace({
                path: currentLang == 'en' ? `/login/bind` : `/${currentLang}/login/bind`,
                query: {
                  code: res.data.code,
                  platform: this.$route.params.platform
                }
              })
            } else {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'error'
              })
            }
            // if(process.client){
            // //   setTimeout(() => {
            // //     window.location.href=window.location.origin
            // //   }, 500);
            // }
          })
          .catch(err => {
            // loading.close();
            this.$router.replace({
              path: this.localePath('/login')
            })
          })
      }
    },
    methods: {}
  }
</script>
<style scoped>
  .global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
    /* overflow: hidden; */
  }
  /* 渐入渐出动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>
